import React from 'react'
import {Link, Route} from 'react-router-dom'
import Button from 'antd-mobile/lib/Button'
import {AnimatedSwitch, spring} from 'react-router-transition';
import {getHistory} from "../../util/uitls";
import InfiniteScrollPage from "../InfiniteScrollPage";
// we need to map the `scale` prop we define below
// to the transform style property
function mapStyles(styles) {
    return {
        opacity: styles.opacity,
        transform: `translateX(${styles.x}px)`,
    };
}

// wrap the `spring` helper to use a bouncy config
function bounce(val) {
    return spring(val, {
        stiffness: 330,
        damping: 22,
    });
}

// child matches will...
const bounceTransition = {
    // start in a transparent, upscaled state
    atEnter: {
        opacity: 0,
        // scale: 1.2,
        x: 750
    },
    // leave in a transparent, downscaled state
    atLeave: {
        opacity: bounce(0),
        // scale: bounce(0.8),
        x: bounce(-100)
    },
    // and rest at an opaque, normally-scaled state
    atActive: {
        opacity: bounce(1),
        x: bounce(0)
        // scale: bounce(1),
    },
};

export default class RouterTest extends React.Component {
    render() {
        return <div>
            <Link to={"/router-test/index1"}>
                <Button>
                    开始路由demo
                </Button>
            </Link>
            <br/>
            <br/>
            <br/>
            <div>
                <AnimatedSwitch
                    atEnter={bounceTransition.atEnter}
                    atLeave={bounceTransition.atLeave}
                    atActive={bounceTransition.atActive}
                    mapStyles={mapStyles}
                    className="switch-wrapper"
                >
                    <Route path={"/router-test/index1"} component={() => {
                        return <div>
                            <InfiniteScrollPage/>
                        </div>
                    }}/>
                    <Route path={"/router-test/index2"} component={() => {
                        return <div>
                            index2<br/>
                            <Button onClick={() => {
                                getHistory().goBack()
                            }}>to index1</Button>
                        </div>
                    }}/>
                </AnimatedSwitch>

            </div>
        </div>
    }
}